<template>
  <div>
    <a-flex justify="justify-content" align="center">
      统计时间段：
      <a-radio-group
        v-model:value="period"
        @change="changePeriod"
        button-style="solid"
      >
        <a-radio-button value="day">日报</a-radio-button>
        <a-radio-button value="week">周报</a-radio-button>
        <a-radio-button value="month">月报</a-radio-button>
        <a-radio-button value="year">年报</a-radio-button>
        <a-radio-button value="custom">自定义</a-radio-button>
      </a-radio-group>
      <div style="width: 100px"></div>
      <a-space v-show="period == 'custom'">
        <a-range-picker
          v-model:value="rangeDate"
          :format="'YYYY-MM-DD'"
          :valueFormat="'YYYY-MM-DD'"
        />
        <a-button type="primary" @click="search">查询</a-button>
      </a-space>
    </a-flex>

    <div class="mt-3">
      <a-spin :spinning="loading" tip="加载中...">
        <a-row :gutter="[32, 6]">
          <a-col class="gutter-row" :span="24" v-if="period == 'day'">
            <div>
              <a-card title="日统计(工时)">
                <p>工单</p>
                <template #extra> 日 </template>
                <Chart
                  :categories="dataState.categories"
                  :data="dataState.data"
                />
              </a-card>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="24" v-if="period == 'week'">
            <div>
              <a-card>
                <template #extra> 周 </template>
                <Chart
                  :categories="dataState.categories"
                  :data="dataState.data"
                />
              </a-card>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="24" v-if="period == 'month'">
            <div>
              <a-card>
                <template #extra> 月 </template>
                <Chart
                  :categories="dataState.categories"
                  :data="dataState.data"
                />
              </a-card>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="24" v-if="period == 'year'">
            <div>
              <a-card>
                <template #extra> 年 </template>
                <Chart
                  :categories="dataState.categories"
                  :data="dataState.data"
                />
              </a-card>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="24" v-if="period == 'custom'">
            <div>
              <a-card>
                <template #extra> 自定义 </template>
                <Chart
                  :categories="dataState.categories"
                  :data="dataState.data"
                />
              </a-card>
            </div>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import Chart from "../components/chart.vue";
import Api from "@/api/backend/api";
const period = ref("day");
const user_id = ref(null);
const start_at = ref("");
const end_at = ref("");
const loading = ref(false);
const dataState = ref({
  categories: [],
  data: [],
});
const init = async () => {
  loading.value = true;
  const res = await Api.dashboardController.home({
    period: period.value,
    user_id: user_id.value,
  });
  if (res == null) {
    loading.value = false;
    return;
  }
  dataState.value.categories = res.map((item) => {
    return item.categories;
  });
  dataState.value.data = res.map((item) => {
    return item.data;
  });
  loading.value = false;
};
init();
const rangeDate = ref();
const search = async () => {
  console.log(rangeDate.value);
  const res = await Api.dashboardController.home({
    period: period.value,
    start_at: rangeDate.value[0],
    end_at: rangeDate.value[1],
    user_id: user_id.value,
  });
  if (res == null) {
    return;
  }
  dataState.value.categories = res.map((item) => {
    return item.categories;
  });
  dataState.value.data = res.map((item) => {
    return item.data;
  });
};
const showCustomSearch = ref(false);
const changePeriod = async (val) => {
  if (period.value == "custom") {
    return;
  }
  await init();
};
</script>

<style></style>
